<template>
  <div class="publish-container">
    <!-- 标签页切换 -->
    <el-tabs v-model="activeTab" class="publish-tabs">
      <el-tab-pane label="发布商品" name="publish">
        <GoodsPublishForm @publish-success="handlePublishSuccess" />
      </el-tab-pane>
      <el-tab-pane label="待审核商品" name="pending">
        <AuditGoodsList status="pending" />
      </el-tab-pane>
      <el-tab-pane label="审核通过商品" name="approved">
        <AuditGoodsList status="approved" />
      </el-tab-pane>
      <el-tab-pane label="审核失败商品" name="rejected">
        <AuditGoodsList status="rejected" @switch-to-publish="switchToPublish" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import GoodsPublishForm from './components/GoodsPublishForm.vue'
import AuditGoodsList from './components/AuditGoodsList.vue'

export default {
  name: 'Publish',
  components: {
    GoodsPublishForm,
    AuditGoodsList
  },
  data() {
    return {
      activeTab: 'publish',
      currentUserId: null
    }
  },
  mounted() {
    this.getCurrentUser()
  },
  methods: {
    // 获取当前用户信息
    getCurrentUser() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
      this.currentUserId = userInfo.id
    },
    // 发布成功回调
    handlePublishSuccess() {
      this.$message.success('商品发布成功！')
      // 可以选择跳转到待审核商品查看
      this.$confirm('商品发布成功！是否查看待审核商品？', '提示', {
        confirmButtonText: '去查看',
        cancelButtonText: '继续发布',
        type: 'success'
      }).then(() => {
        this.activeTab = 'pending'
      }).catch(() => {
        // 用户选择继续发布，不做任何操作
      })
    },
    // 跳转到个人主页
    goToMyInfo() {
      this.$router.push('/myInfo')
    },
    
    // 切换到发布商品标签页
    switchToPublish() {
      this.activeTab = 'publish'
    }
  }
}
</script>

<style scoped>
.publish-container {
  background-color: #f7f7f7;
  min-height: 100vh;
  padding: 20px 0;
}

.publish-tabs {
  width: 1000px;
  margin: 0 auto;
  background-color: white;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0px 2px 10px 1px #0000002a;
}

/deep/ .el-tabs__item {
  color: #666;
  font-weight: 500;
  font-size: 16px;
  padding: 0 30px;
}

/deep/ .el-tabs__item.is-active {
  color: #00caa8;
  font-weight: 600;
}

/deep/ .el-tabs__active-bar {
  background-color: #00caa8;
  height: 3px;
  border-radius: 2px;
}

/deep/ .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #e4e7ed;
}

/deep/ .el-button--primary {
  background-color: #00caa8;
  border-color: #00caa8;
  border-radius: 10px;
}

/deep/ .el-button--primary:hover {
  background-color: #00b894;
  border-color: #00b894;
}
</style>
